<script setup lang="ts">
const { t } = useI18n({ inheritLocale: true, useScope: 'local' });

interface Props {
  price?: number,
  isDegrading?: boolean,
  isLoading?: boolean,
}
const props = withDefaults(defineProps<Props>(), {
  price: 0,
  isDegrading: false,
  isLoading: false,
});
</script>

<template>
  <div class="total-price">
    <div class="price-row">
      {{props.isDegrading ? t('priceRefund') : t('priceTotal')}}
      <span v-loading="isLoading" class="price-value">{{props.price}}</span>
      {{t('quantifierOfPrice')}}
    </div>
    <ElLink class="price-detail-link">{{t('priceDetailLink')}}</ElLink>
  </div>
</template>

<i18n lang="yaml" locale="zh-CN">
  priceTotal: '费用总计'
  priceRefund: '可退费用'
  quantifierOfPrice: '元'
  priceDetailLink: '了解计费详情'
</i18n>

<style lang="scss" scoped>
.total-price {
  font-size: 12px;

  .price-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
  }

  .price-value {
    min-width: 46px;
    margin: 0 4px;
    font-size: 16px;
    color: #e6a23c;
    text-align: center;
  }

  .price-detail-link {
    font-size: 12px;
    color: var(--el-color-primary);
  }
}
</style>
